Angular Data Binding

Data Binding is a way of communication between component and the html view of the component. Their are different ways of communication between the typescript file and html file of the component.They are,

• Interpolation
• Property binding
• Two-way binding
• Event binding

Let's data binding with an example program. Create an application using the below angular cli command.

ng new databinding-tutorial

This will create a new application. Now let's discuss the above mentioned concepts one by one.

Interpolation

Interpolation is represented using {{}} symbol. Its the way of displaying data in the component's class file in the HTML template.

Open app.component.ts file and modify the code as below.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  welcomeMessage = "Welcome to Readers Buddy";
}

Open app.component.html file and modify the code as below.

<h3>{{ welcomeMessage }}</h3>

In app.component.ts file we created a variable with name welcomeMessage and assigned the value Welcome to Readers Buddy.

To show the message in the UI of app.component.html file we simple enclose the welcomeMessage within interpolation symbol {{}}.

Property binding

As the name suggest, its used to bind any value to the property of html element, usually it will be html attribute.

Open the app.component.ts file and modify the code as below.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  welcomeMessage = "Welcome to Readers Buddy";
  isDisabled = true;
}

Open the app.component.html file and modify the code as below.

  <!-- Interpolation -->
<div>
  <h3>{{ welcomeMessage }}</h3>
</div>

<!-- Property Binding -->
<div>
  <input type="button" [disabled]="isDisabled" value="Click" />
</div>

Here, the app.component.ts file contains a variable isDisabled with default value set to true. To bind the value to the html file we use [] symbol.

We enclose disabled property of input element inside [] symbol and assign isDisabled value. When we run the application we can find the button will be is disabled state.

Two-way binding

Two-way binding allows to exchange the data from component to its view and from view to its component. Here the communication type is bi-directional. It can be achieved using ngModel directive. The notation used to acheive two-way binding is [()].

To make use of ngModel we need to import the FormModule into the module where the component is declared.

Open the app.module.ts file and add the import the FormModule and declare it in the imports array.

import { FormsModule } from "@angular/forms";

Open the app.component.html file and modify the code as below.

<!-- Interpolation -->
<div>
  <h3>{{ welcomeMessage }}</h3>
</div>

<!-- Property Binding -->
<div>
  <input type="button" [disabled]="isDisabled" value="Click" />
</div>

<!-- Two-way data binding -->
<div>
  <input type="text" [(ngModel)]="welcomeMessage" />
</div>

Run the application, Now when you change the value in the input box, it will be reflected in the interpolation declared above.

Event Binding

Event Binding is the process of binding an event to a method in component. The event can be a click or keydown or keypress or any other events. To take action based on the button click, then we will create a method in the component file of the component and call the method of click event in html by enclosing the click inside ().

Modify the code the app.component.ts file as below.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  welcomeMessage = "Welcome to Readers Buddy";
  isDisabled = true;

  showAlert() {
    alert("Click event has been triggered.");
  }
}

Modify the app.component.html file as below.

<!-- Interpolation -->
<div>
  <h3>{{ welcomeMessage }}</h3>
</div>

<!-- Property Binding -->
<div>
  <input type="button" [disabled]="isDisabled" value="Click" />
</div>

<!-- Two-way data binding -->
<div>
  <input type="text" [(ngModel)]="welcomeMessage" />
</div>

<!-- Event Binding -->
<div>
  <input type="button" (click)="showAlert()" value="Show Alert" />
</div>

Now, when we click the button it will show an alert message as below.